import React from "react";
import { useNavigate } from "react-router-dom";
import { Navigate, Route, Routes, useLocation } from "react-router";
import Kanban from "../Kanban";
import Epic from "../epic";
import styled from "@emotion/styled";
import { Menu } from "antd";

const useRouteType = () => {
  const units = useLocation().pathname.split("/");
  return units[units.length - 1];
};
export default function Index() {
  const navigate = useNavigate();
  const routeType = useRouteType();
  return (
    <Container>
      <Aside>
        <Menu
          defaultSelectedKeys={[routeType]}
          onClick={({ key }) => {
            navigate(key);
          }}
          mode={"inline"}
          items={[
            {
              key: "kanban",
              label: "看板",
            },
            {
              key: "epic",
              label: "任务组",
            },
          ]}
        ></Menu>
      </Aside>
      <Main>
        <Routes>
          <Route path={"/kanban"} element={<Kanban />}></Route>
          <Route path={"/epic"} element={<Epic />}></Route>
          <Route
            path={"/*"}
            element={
              <Navigate
                to={window.location.pathname + "/kanban"}
                replace={true}
              />
            }
          ></Route>
        </Routes>
      </Main>
    </Container>
  );
}
const Aside = styled.aside`
  background-color: rgb(244, 245, 247);
  display: flex;
`;
const Main = styled.div`
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
`;

const Container = styled.div`
  display: grid;
  grid-template-columns: 16rem 1fr;
  width: 100%;
`;
